<template>
<uni-shadow-root class="partials-nearShop-gongyi_near_shop_two-index"><template name="gongyi_shop_two_list">
<block v-if="shops.length >0">
  <view class="shop_detail_list">
    <view v-for="(item,index) in (shops)" :key="item.index" class="shop_detail_item">
      <view class="shop_detail_item_short_info" :data-link="'near_shop_page.html?addShopId='+(item.id)" @click="tolinkUrl">
          <view class="shop_detail_item_short_info_icon">
              <image class="shop_detail_item_short_info_img" mode="widthFix" :src="(item.shopLogo)+'?x-oss-process=style/preview'" v-if="item.shopLogo"></image>
              <image class="shop_detail_item_short_info_img" mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/17/11/16/47_265.jpg?x-oss-process=style/preview_120" v-else></image>
          </view>
          <view class="shop_detail_item_short_info_content">
              <view class="shop_detail_item_short_info_content_top">
                  <text class="shop_name">{{item.shopName}}</text>
                  <text class="shop_distance" v-if="'item.distance'">距{{publicFun.toFix(item.distance||0)}}km</text>
                  <text class="shop_distance" v-else>未设置</text>
              </view>
              <view class="shop_detail_item_short_info_content_bottom">
                  <scroll-view class="tags_content" scroll-x>
                    <view v-for="(tags,index) in (item.tagArray)" :key="tags.index" :style="'border:2rpx solid '+(defaultColor)+';color:'+(defaultColor)" class="tags_item" v-if="item.tagArray">{{tags}}</view>
                  </scroll-view>
              </view>
          </view>
      </view>
      <scroll-view class="shop_detail_product_list" scroll-x v-if="item.items&&item.items.length!=0">
          <view v-for="(productItem,index) in (item.items)" :key="productItem.index" class="shop_detail_product_item" :data-info="productItem" @click="toProlinkUrl">
              <view class="shop_detail_product_item_icon">
                  <image :src="productItem.imagePath" class="shop_detail_product_item_img"></image>
              </view>
              <text class="product_name">{{productItem.name}}</text>
              <text class="product_price">￥{{productItem.price}}</text>
          </view>
      </scroll-view>
      <text v-else class="no_shop_product_list">该店铺暂无产品~</text>
    </view>
  </view>
</block>
<block v-else>
  <view class="noproduct">
    <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120"></image>
    <text>没有相关店铺</text>
  </view>
</block>
</template></uni-shadow-root>
</template>
<wxs src="../../../public/publicFun.wxs" module="publicFun"></wxs>
<script>

global['__wxRoute'] = 'partials/nearShop/gongyi_near_shop_two/index'

Component({})

export default global['__wxComponents']['partials/nearShop/gongyi_near_shop_two/index']
</script>
<style platform="mp-weixin">
.shop_detail_list{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:#fff;
    box-shadow:0px 0px 16px 0px #eee;
    border-radius:20px;
    margin: 30rpx;
}
.shop_detail_item{
    display: flex;
    flex-direction: column;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
}
.shop_detail_item:last-child{
    border: none;
}
.shop_detail_item_short_info{
    display: flex;
    flex-direction: row;
}
.shop_detail_item_short_info_icon{
    width: 104rpx;
    height: 104rpx;
    margin-right: 32rpx;
}
.shop_detail_item_short_info_img{
    width: 100%;
    height: 100%;
}
.shop_detail_item_short_info_content{
    width: 500rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 104rpx;

}
.shop_detail_item_short_info_content_top{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6rpx;
}
.shop_name{
    display: flex;
    flex-direction: row;
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
}
.shop_distance{
    font-size: 24rpx;
    color: #999;
}
.shop_detail_item_short_info_content_bottom{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
.tags_item {
    font-size: 20rpx !important;
}
.shop_detail_product_list{
    margin-top: 18rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x:hidden;
    width:100%;
    white-space: nowrap;
}
.shop_detail_product_item{
    display:inline-flex;
    flex-direction: column;
    margin: 0 11rpx;
    width: 192rpx;
}
.shop_detail_product_item_icon{
    width: 192rpx;
    height: 192rpx;
    border: 1rpx solid #eee;
    border-radius: 16rpx;
    margin-bottom: 16rpx;
    overflow: hidden;
}
.shop_detail_product_item_img{
    width: 100%;
    height: 100%;
}
.product_name{
    font-size: 24rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 4rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.product_price{
    color: #EF6546;
    font-size: 24rpx;
}
.no_shop_product_list{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #999;
    height: 50rpx;
    margin-top: 18rpx;
}
</style>